<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="demo">
    <h1>测试：v-for 遍历数据</h1>
    <ul>
        <li v-for="(p,index) in persons" :key="index">
            {{index}}- - - {{p.name}}- - -{{p.age}}
            - - -<button @click="deleteP(index)">删除</button>
            - - -<button @click="updataP(index,{name:'Cat',age:'20'})">更新</button>
        </li>
    </ul>
    <h1>测试：v-for 遍历对象</h1>
    <ul>
        <li v-for="(value,key) in persons[1] :key='key'">
            {{value}}- - -{{key}}
        </li>
    </ul>


</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        //vue只是监视persons变量本身，并不对数组内部数据的改变进行监视
        //vue重写了数组中的一系列改变数组内部数据的放啊（先调用原生，更新界面）--->数组内部改变，界面自动变化
        el:'#demo',
        data:{
            persons:[
                {name:'Tom',age:18},
                {name:'Jack',age:15},
                {name:'Bob',age:12},
                {name:'Rose',age:19},
            ]
        },
        methods:{
            deleteP(index) {
                // 删除persons中指定index的p
                this.persons.splice(index,1)
            },
            updataP(index,newP){
                //this.persons[index] = newP //并无改变persons变量，但并没有调用编译方法，vue不会更新界面
                this.persons.splice(index,1,newP)
    }
        }
    })
</script>
</body>
</html>